<template>
    <div class="box-cloud">
        <div class="item-box">
            <div class="title-small">政务云客户清单 <el-button type="text" class="back-btn" v-if="cityList.length"
                    @click="goBack">返回</el-button></div>
            <div class="top-list top-list-kh" v-if="khList.length && !cityList.length">
                <div class="top-item" v-for="item, i in khList">
                    <div class="top-name" :class="i > 3 && i < 10 ? 'top-name-yellow' : i > 9 ? 'top-name-red' : ''">
                        <span class="top-num">{{ i + 1 }}</span>
                        <span class="subName" @click="goTable(item.cityCode)">{{ item.cityCode }}</span>
                        <span class="name-num" @click="goTable(item.cityCode)">{{ item.totalCount }}</span>
                    </div>
                    <div class="num-box" :class="i > 3 && i < 10 ? 'num-box-yellow' : i > 9 ? 'num-box-red' : ''">
                        <div class="num-kh-value" v-for="v, i in item.customerTypeStats"
                            @click="goTable(item.cityCode, v.customerType)">{{ v.customerType }} <span class="kh-num">
                                {{ v.count }}</span></div>
                    </div>
                </div>
            </div>
            <div class="top-list top-list-kh top-list-city" v-else-if="cityList.length">
                <div class="top-item" v-for="item, i in cityList">
                    <div class="top-name"
                        :class="i > 2 && i < (cityList.length - 3) ? 'top-name-yellow' : i > (cityList.length - 4) ? 'top-name-red' : ''">
                        <span class="top-num">{{ i + 1 }}</span>
                        <span class="subName" @click="goTable(item.cityCode, '', item.districtName)">{{
                            item.districtName }}</span>
                        <span class="name-num" @click="goTable(item.cityCode, '', item.districtName)">{{ item.totalCount
                            || 0 }}</span>
                    </div>
                    <div class="num-box"
                        :class="i > 2 && i < (cityList.length - 3) ? 'num-box-yellow' : i > (cityList.length - 4) ? 'num-box-red' : ''">
                        <div class="num-kh-value" @click="goTable(item.cityCode, '党政机关', item.districtName)">党政机关<span
                                class="kh-num"> {{ item.partyGovernment || 0 }}</span></div>
                        <div class="num-kh-value" @click="goTable(item.cityCode, '企事业单位', item.districtName)">企事业单位<span
                                class="kh-num"> {{ item.enterprises || 0 }}</span></div>
                        <div class="num-kh-value" @click="goTable(item.cityCode, '公检法', item.districtName)">公检法<span
                                class="kh-num"> {{ item.publicSecurity || 0 }}</span></div>
                        <div class="num-kh-value" @click="goTable(item.cityCode, '教育', item.districtName)">教育<span
                                class="kh-num"> {{ item.educate || 0 }}</span></div>
                        <div class="num-kh-value" @click="goTable(item.cityCode, '银行', item.districtName)">银行<span
                                class="kh-num"> {{ item.bank || 0 }}</span></div>
                        <div class="num-kh-value" @click="goTable(item.cityCode, '医疗', item.districtName)">医疗<span
                                class="kh-num"> {{ item.medical || 0 }}</span></div>
                        <div class="num-kh-value" @click="goTable(item.cityCode, '军警', item.districtName)">军警<span
                                class="kh-num"> {{ item.police || 0 }}</span></div>
                        <div class="num-kh-value" @click="goTable(item.cityCode, '村屯社区', item.districtName)">村屯社区<span
                                class="kh-num"> {{ item.villageCommunity || 0 }}</span></div>
                    </div>
                </div>
            </div>
            <div v-else class="empty-box">
                <img src="@/assets/img/empty.png" width="120" />
                <div>暂无数据</div>
            </div>
        </div>
        <div class="item-box">
            <div class="title-small">政务云商机清单完整率</div>
            <div class="top-list" v-if="sjList.length">
                <div class="top-item" v-for="item, i in sjList">
                    <div class="top-name" :class="i > 3 && i < 10 ? 'top-name-yellow' : i > 9 ? 'top-name-red' : ''">
                        <span class="top-num">{{ i + 1 }}</span>{{ item.subName }}（<span class="name-num">{{ item.pre ||
                            0
                        }}%</span>）
                    </div>
                    <div class="num-box" :class="i > 3 && i < 10 ? 'num-box-yellow' : i > 9 ? 'num-box-red' : ''">
                        <div class="num-value" :class="v.taskName == '地市摸排' && 'hover-value'"
                            v-for="v, i in item.batchSubTasks" :key="i"
                            @click="v.taskName == '地市摸排' ? goSjTable(item.subName) : ''">{{ v.taskName }} {{
                                v.indexValue
                            }}</div>
                    </div>
                </div>
            </div>
            <div v-else class="empty-box">
                <img src="@/assets/img/empty.png" width="120" />
                <div>暂无数据</div>
            </div>
        </div>
        <div class="item-box">
            <div class="title-small">商机预警</div>
            <el-select class="select-box" v-model="value" placeholder="请选择" @change="change">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <BarCloudChart :dataList="dataList" class="bar-box-cloud" :value="value" v-if="dataList.length" />
            <div v-else class="empty-box">
                <img src="@/assets/img/empty.png" width="120" />
                <div>暂无数据</div>
            </div>
        </div>
        <div class="item-box">
            <div class="title-small">政务云商机清单转化率</div>
            <div class="top-list" v-if="sjqdList.length">
                <div class="top-item" v-for="item, i in sjqdList">
                    <div class="top-name" :class="i > 3 && i < 10 ? 'top-name-yellow' : i > 9 ? 'top-name-red' : ''">
                        <span class="top-num">{{ i + 1 }}</span>{{ item.subName }}（<span class="name-num">{{ item.pre ||
                            0
                            }}%</span>）<div class="btn" @click="goOkr(item, '政务云商机清单转化率')">调度</div>
                    </div>
                    <div class="num-box" :class="i > 3 && i < 10 ? 'num-box-yellow' : i > 9 ? 'num-box-red' : ''">
                        <div class="num-value" v-for="v, i in item.batchSubTasks" :key="i">{{ v.taskName }} {{
                            v.indexValue
                            }}</div>
                    </div>
                </div>
            </div>
            <div v-else class="empty-box">
                <img src="@/assets/img/empty.png" width="120" />
                <div>暂无数据</div>
            </div>
        </div>
    </div>
</template>
<script>
import BarCloudChart from './BarCloudChart'
import tabChange from '@/components/tabChange';
import { getOkrList, countByCustomerType, countCloudCompleteByCityCode, countCloudCompleteByContractEndTime } from '@/api/api'
import store from '@/store'
import qs from 'querystring'
let dataSjWz = [];
export default {
    components: {
        BarCloudChart,
        tabChange
    },
    watch: {

    },
    data() {
        return {
            options: [{
                value: '移动',
                label: '移动'
            }, {
                value: '联通',
                label: '联通'
            }, {
                value: '电信',
                label: '电信'
            }, {
                value: '华为',
                label: '华为'
            }, {
                value: '浪潮',
                label: '浪潮'
            }, {
                value: '未招标',
                label: '未招标'
            }],
            value: '移动',
            changeType: '0',
            cityList: [],
            ydList: [],
            ltList: [],
            dxList: [],
            hwList: [],
            lcList: [],
            wzbList: [],
            dataList: [],
            fgList: [],
            khList: [],
            sjList: [],
            sjqdList: [],
              citysList: [
                { name: '省本级' },
                { name: '哈尔滨' },
                { name: '齐齐哈尔' },
                { name: '牡丹江' },
                { name: '佳木斯' },
                { name: '大庆' },
                { name: '伊春' },
                { name: '鸡西' },
                { name: '鹤岗' },
                { name: '双鸭山' },
                { name: '‌七台河' },
                { name: '绥化' },
                { name: '黑河' },
                { name: '大兴安岭' }
            ],
            countShangJiList: []
        }
    },
    mounted() {
        this.getFgList()
        this.getcustomerTypeCount()
        this.getcountByFourLevelClassify(this.value)
    },
    methods: {
        getcountByFourLevelClassify(providerType) {
            countCloudCompleteByContractEndTime({ providerType, filterByContractEndTime: true }).then(res => {
                let warnList = res || []
                let list = []
                this.citysList.map(val => {
                    let filterList = warnList.find(v => v.cityCode === val.name);
                    if (filterList) {
                        list.push({ name: filterList.cityCode, value: filterList.totalCount || 0, attr: '商机预警数量' })
                    } else {
                        list = list.concat([{
                            name: val.name,
                            value: 0,
                            attr: "商机预警数量"
                        }])
                    }
                })
                this.dataList = list || []
            })

        },
        getcustomerTypeCount() {
            countByCustomerType().then(res => {
                this.khList = this.getSort(res || [], 'totalCount')
            })
        },
        goBack() {
            this.cityList = []
        },
        goCity(name) {
            // selectCustomerList({ cityCode: name }).then(res => {
            //     let list = res.list
            //     this.cityList = this.getSort(list, 'totalCount')
            // })
        },
        goTable(cityCode, customerType, districtName) {
            let loginCode = store.getters.loginCode
            // this.$router.push({ path: '/customerListCloud', query: { cityCode, customerType, loginCode, districtName } });
            let params = { cityCode, customerType, loginCode, districtName, type: '34' }
            window.open(`/#/tokenLogin?${qs.stringify(params)}`)
        },
        goSjTable(cityCode, customerType) {
            let loginCode = store.getters.loginCode
            // this.$router.push({ path: '/businessOpportunitiesListCloud', query: { cityCode, customerType, loginCode: loginCode } });
            let params = { cityCode, customerType, loginCode, type: '35' }
            window.open(`/#/tokenLogin?${qs.stringify(params)}`)
        },
        goOkr(item, content) {
            let loginCode = store.getters.loginCode
            window.open(`/#/tokenLogin?loginCode=${loginCode}&type=40&content=${item.subName + content}`)
        },
       change(e) {
            this.getcountByFourLevelClassify(e);
        },
        getFgList() {
            getOkrList({ taskType: '60' }).then(res => {
                // let data = res?.data.filter(item => item.mainName === '政务云转化率') || []
                // let fgList = data[0].subTasks.map(item => {
                //     return { ...item, pre: this.getPre(item) }
                // }) || []
                // this.fgList = this.getSort(fgList, 'pre') || []
                let dataSj = res?.data.find(item => item.mainName === '政务云商机转化率') || {}
                let sjqdList = dataSj?.subTasks.map(item => {
                    return { ...item, pre: this.getPreSj(item, '商机转化', '商机合计') }
                }) || []
                this.sjqdList = this.getSort(sjqdList, 'pre') || []
                dataSjWz = res?.data.find(item => item.mainName === '政务云商机完整率') || {}
                this.getcountShangJiByCityCode()
                // let sjList = dataSjWz?.subTasks.map(item => {
                //     return { ...item, pre: this.getPreSj(item, '地市摸排', '省级调研') }
                // }) || []
                // this.sjList = this.getSort(sjList, 'pre') || []
            })
        },
        getcountShangJiByCityCode() {
            countCloudCompleteByCityCode().then(res => {
                this.countShangJiList = res || []
                let sjList = dataSjWz?.subTasks?.map(item => {
                    let haveItem = item.batchSubTasks.find(v => v.taskName === '地市摸排')
                    if (haveItem) {
                        haveItem.indexValue = this.getCityNum(item.subName)
                    } else {
                        item.batchSubTasks.push({ taskName: '地市摸排', indexValue: this.getCityNum(item.subName) })
                    }
                    return { ...item, pre: this.getPreSj(item, '地市摸排', '省级调研') }
                }) || []
                this.sjList = this.getSort(sjList, 'pre') || []
            })
        },
        getCityNum(name) {
            return this.countShangJiList.find(item => item.cityCode === name)?.totalCount || 0
        },
        getNumber(item, name) {
            let batchSubTasks = item.batchSubTasks || [];
            let indexValue = batchSubTasks.find(v => v.taskName == name)?.indexValue || 0;
            return indexValue || 0
        },
        getPreSj(item, name1, name2) {
            let num1 = this.getNumber(item, name1)
            let num2 = this.getNumber(item, name2)
            let pre = num1 / num2
            return this.getPreNum(pre)
        },
        getPre(item) {
            let num1 = this.getNumber(item, '接入数量')
            let num2 = this.getNumber(item, '预覆盖点位')
            let pre = num1 / num2
            return this.getPreNum(pre)
        },
        getPreNum(num) {
            return num ? this.truncateToFixed(num * 100, 1) : 0
        },
        truncateToFixed(value, decimals) {
            const integerPart = Math.trunc(value); // 获取整数部分
            const decimalPart = value - integerPart; // 获取小数部分
            const factor = Math.pow(10, decimals);
            const truncatedDecimalPart = decimalPart < 0 ? Math.ceil(decimalPart * factor) / factor : Math.floor(decimalPart * factor) / factor; // 根据正负选择向上或向下截断
            return integerPart + truncatedDecimalPart; // 组合整数部分和小数部分
        },
        getSort(array, name) {
            const sortedArray = array.sort((a, b) => {
                return b[name] - a[name]
            });
            return sortedArray
        },
    }
}
</script>
<style lang="scss" scoped>
.box-cloud {
    width: 100%;
    position: relative;
    margin-top: 20px;
    overflow: hidden;
}

.bar-box-cloud {
    width: 100%;
    height: 230px;
    padding: 10px 16px 0 !important;
    background: #fff;
}

.timeChange-warp {
    width: 1440px;
    position: absolute;
    left: 140px;
    top: -48px;
    z-index: 999;
}

.select-box {
    position: absolute;
    right: 16px;
    top: 10px;
    width: 130px;
    z-index: 999;
}


.top-num {
    color: #fff;
    background: #0b82ff;
    border-radius: 100px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    margin: 10px;
    font-size: 14px;
    display: inline-block;
    font-weight: 500;
}

.top-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
    height: 190px;
    background: #fff;
    margin-top: 16px;

    .top-item {
        width: 13.5%;

        .top-name {
            width: 100%;
            text-align: center;
            height: 35px;
            line-height: 35px;
            background: #f0f7fd;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            // justify-content: center;
            font-size: 15px;
            font-weight: bold;
            position: relative;

            .name-num {
                font-size: 19px;
                color: #0b82ff;
            }
        }

        .num-box {
            width: 100%;
            display: flex;
            background: #e4f2fd;
            padding: 16px 12px;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .top-name-yellow {
            background: #fdf7f0;

            .name-num {
                color: #f89626;
            }

            .top-num {
                background: #f89626;
            }
        }

        .num-box-yellow {
            background: #fcedc1;
        }

        .top-name-red {
            background: #fdf0f0e6;

            .name-num {
                color: #fb3d32;
            }

            .top-num {
                background: #fb3d32;
            }
        }

        .num-box-red {
            background: #fcc6c1bf;
        }
    }
}

.hover-value {
    cursor: pointer;

    &:hover {
        color: #0b82ff;
    }
}

.top-list-kh {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    height: 155px;
    flex-direction: row;

    .top-item {
        width: 124px;

        .top-name {
            cursor: pointer;

            .subName {
                cursor: pointer;
                font-size: 14px;

                &:hover {
                    color: #0b82ff;
                }
            }

            .name-num {
                font-size: 14px;
                position: absolute;
                right: 6px;

                &:hover {
                    text-decoration: underline;
                }
            }


        }

        .top-num {
            margin: 10px 4px 10px 5px;
            font-size: 12px;
            width: 16px;
            height: 16px;
            line-height: 16px;
        }

        .num-box {
            line-height: 22px;
            padding: 5px 8px;
            height: 120px;
            cursor: pointer;

            .kh-num {
                width: 50%;
                text-align: right;
                display: inline-block;
                position: absolute;
                right: 0;
                font-weight: bold;
            }

            .num-kh-value {
                width: 100%;
                position: relative;
                font-size: 14px;

                &:hover {
                    color: #0b82ff;
                }
            }

        }
    }
}

.top-list-city {
    // flex-direction: column;
    display: flex;
    height: auto;
    justify-content: flex-start;
    margin-top: 11px;

    .top-item {
        width: 175px;
        margin: 5px;
    }
}

.top-list-kh::-webkit-scrollbar {
    width: 4px;
    height: 8px;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
.top-list-kh::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
.top-list-kh::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ccc;
}

.btn {
    font-weight: 500;
    color: #1890ff;
    position: absolute;
    right: 16px;
    cursor: pointer;
}

.empty-box {
    text-align: center;
    color: #999;
    line-height: 30px;
    padding-top: 25px;
    width: 100%;
    height: 190px;
}

.hover-name {
    cursor: pointer;

    &:hover {
        box-shadow: 0 0 10px #ccc;
    }
}

.item-box {
    background: #fff;
    padding: 16px 16px 16px;
    margin-bottom: 16px;
    position: relative;

    .title-small {
        font-size: 17px;
        font-weight: bold;
    }
}

.back-btn {
    padding: 0;
    font-size: 15px;
    margin-left: 5px;
}
</style>